<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- header section start-->
    <div class="header-section">
     
 <!--切换按钮开始-->
<a class="toggle-btn"><i class="fa fa-bars"></i></a>
<!--切换按钮结束-->
<div class="title">
	 学生管理系统
</div>
<!--通知栏开始 -->
<div class="menu-right">
    <ul class="notification-menu">
        <li>
            <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                <i class="fa fa-tasks"></i>
                <span class="badge">8</span>
            </a>
            <div class="dropdown-menu dropdown-menu-head pull-right">
                <h5 class="title">You have 8 pending task</h5>
                <ul class="dropdown-list user-list">
                    <li class="new">
                        <a href="#">
                            <div class="task-info">
                                <div>Database update</div>
                            </div>
                            <div class="progress progress-striped">
                                <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-warning">
                                    <span class="">40%</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="new">
                        <a href="#">
                            <div class="task-info">
                                <div>Dashboard done</div>
                            </div>
                            <div class="progress progress-striped">
                                <div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-success">
                                    <span class="">90%</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="task-info">
                                <div>Web Development</div>
                            </div>
                            <div class="progress progress-striped">
                                <div style="width: 66%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="66" role="progressbar" class="progress-bar progress-bar-info">
                                    <span class="">66% </span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="task-info">
                                <div>Mobile App</div>
                            </div>
                            <div class="progress progress-striped">
                                <div style="width: 33%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="33" role="progressbar" class="progress-bar progress-bar-danger">
                                    <span class="">33% </span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="task-info">
                                <div>Issues fixed</div>
                            </div>
                            <div class="progress progress-striped">
                                <div style="width: 80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar">
                                        <span class="">80% </span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="new"><a href="">See All Pending Task</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                    <i class="fa fa-envelope-o"></i>
                    <span class="badge">5</span>
                </a>
                <div class="dropdown-menu dropdown-menu-head pull-right">
                    <h5 class="title">You have 5 Mails </h5>
                    <ul class="dropdown-list norJohn Doemal-list">
                        <li class="new">
                            <a href="">
                                <span class="thumb"><img src="images/photos/user1.png" alt="" /></span>
                                <span class="desc">
                                  <span class="name">Benett-Chen <span class="badge badge-success">new</span></span>
                                  <span class="msg">Lorem ipsum dolor sit amet...</span>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span class="thumb"><img src="images/photos/user2.png" alt="" /></span>
                                <span class="desc">
                                  <span class="name">Jonathan Smith</span>
                                  <span class="msg">Lorem ipsum dolor sit amet...</span>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span class="thumb"><img src="images/photos/user3.png" alt="" /></span>
                                <span class="desc">
                                  <span class="name">Jane Doe</span>
                                  <span class="msg">Lorem ipsum dolor sit amet...</span>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span class="thumb"><img src="images/photos/user4.png" alt="" /></span>
                                <span class="desc">
                                  <span class="name">Mark Henry</span>
                                  <span class="msg">Lorem ipsum dolor sit amet...</span>
                                </span>
                            </a>
                        </li>
						<li>
                            <a href="">
                                <span class="thumb"><img src="images/photos/user5.png" alt="" /></span>
                                <span class="desc">
                                  <span class="name">Jim Doe</span>
                                  <span class="msg">Lorem ipsum dolor sit amet...</span>
                                </span>
                            </a>
                        </li>
                        <li class="new"><a href="">Read All Mails</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                    <i class="fa fa-bell-o"></i>
                    <span class="badge">4</span>
                </a>
                <div class="dropdown-menu dropdown-menu-head pull-right">
                    <h5 class="title">Notifications</h5>
                    <ul class="dropdown-list normal-list">
                        <li class="new">
                            <a href="">
                                <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                <span class="name">Server #1 overloaded.  </span>
                                <em class="small">34 mins</em>
                            </a>
                        </li>
                        <li class="new">
                            <a href="">
                                <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                <span class="name">Server #3 overloaded.  </span>
                                <em class="small">1 hrs</em>
                            </a>
                        </li>
                        <li class="new">
                            <a href="">
                                <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                <span class="name">Server #5 overloaded.  </span>
                                <em class="small">4 hrs</em>
                            </a>
                        </li>
                        <li class="new">
                            <a href="">
                                <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                <span class="name">Server #31 overloaded.  </span>
                                <em class="small">4 hrs</em>
                            </a>
                        </li>
                        <li class="new"><a href="">See All Notifications</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <img src="images/photos/admin-avatar.png" alt="" />
                    Benett-Chen
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                    <li><a href="#"><i class="fa fa-user"></i>  Profile</a></li>
                    <li><a href="#"><i class="fa fa-cog"></i>  Settings</a></li>
                    <li><a href="quit"><i class="fa fa-sign-out"></i> 安全退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!--通知栏结束 -->
</div>